<style scoped lang="scss">
.dialog {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  background-color: #1ab394;
  margin-top: 200px;
  margin-left: 700px;
  position: relative;
  z-index: 10100;
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

.dialog.myDialog-enter {
  width: 0;
  height: 0;
}

.dialog.myDialog-enter-active {
  transition: 0.5s all ease-in-out;
  overflow: hidden;
}

.dialog.myDialog-enter-to {
  width: 300px;
  height: 200px;
}

.dialog.myDialog-leave {
  width: 300px;
  height: 200px;
}

.dialog.myDialog-leave-active {
  transition: 0.5s all ease-in-out;
  overflow: hidden;
}

.dialog.myDialog-leave-to {
  width: 0;
  height: 0;
}
</style>

<template>
  <div>
    <svg-icon icon-class="chatgpt"  @click="goPath('/chatgpt')" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible : false
    }
  },
  methods: {
    goPath(path) {
      if (this.$route.path !== path)
        this.$router.replace({ path : path })
    },
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  },
  beforeRouteLeave(to, from, next) {
    // 关闭遮罩层的逻辑，可以根据实际需求进行调整
    this.closeDialog()
    next();
  }
}
</script>
